<!--工序作业指导书管理-->
<!--用户权限说明-->
<!--管理员：代码：1:可以做所有的操作；
               2:可以添加作业指导书以及所有修改作业指导书的权限；
               3：只能编辑作业指导书，但是不能新加
               4：可以编辑作业指导书，但是不能编辑关联控制计划
               5：只能编审批会签，但是不能修改
               5：只能查看，不能编辑-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">作业引导系统</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="margin-bottom: 10px">
            <el-card class="box-card">
              <div slot="header" class="clearfix" style="text-align: left">
                <span>选择提示：</span>
              </div>
              <div style="text-align: left">
                <div style="color: red;font-size: 16px" ><strong>{{titleMianId}}</strong></div>
                <div style="color: red;font-size: 16px" ><strong>{{titleMianOp}}</strong></div>
              </div>
            </el-card>
          </div>
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              style="width: 160px">
          </el-input>
          <el-tree
              style="margin: 10px 8px;"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree"
              highlight-current></el-tree>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="overflow-y: auto;overflow-x: auto; height: 79vh">
            <div style="display: flex;height: 75vh;margin-top: 10px">
              <div style="flex-grow: 1;
                  border: 1px solid blue;
                  box-sizing: border-box;
                  margin-left: 8px;
                  padding: 8px;
                  display: flex;
                  width: 100%">
                <div style="flex: 1;height: 75vh;scroll-margin-right: 8px;overflow-x: auto">
                  <div style="text-align: left;">
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard1 , color:workBookHeardColour1, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(1)">要领书/指导书</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard2 , color:workBookHeardColour2, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(2)">零部件明细</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard3 , color:workBookHeardColour3, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(3)">失效案例库</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard4 , color:workBookHeardColour4, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(4)">工时</el-link>
                  </div>
                  <hr>
                  <div v-if="workBookHeardUse===1">
                    <el-table
                        :data="workBook"
                        border
                        style="width: 100%;margin-top: 5px"
                        height="66vh"
                        highlight-current-row
                        @expand-change="workBookRowClick">
                      <el-table-column
                          type="expand"
                          v-slot:default="props">
                        <div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>注意点说明：</span>
                            <span v-if="languageS==='chinese' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.problem}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>品质检查：</span>
                            <span v-if="languageS==='chinese' && props.row.inspect.split('|*|').length===3">{{props.row.inspect.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.inspect.split('|*|').length===3">{{props.row.inspect.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.inspect.split('|*|').length===3">{{props.row.inspect.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.inspect}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <div>控制计划要求：<el-link @click="editBook(6,props)"><i class="el-icon-edit"></i></el-link></div>
                            <hr>
                            <div style="width: 100%;" v-if="isControlPlanLoad">
                              <el-table
                                  :data="controlPlanData"
                                  style="width: 100%"
                                  size="mediut">
                                <el-table-column
                                    label="产品/过程规范/公差"
                                    width="250px"
                                    prop="specification"
                                    fixed
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.specification}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.specificationEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.specificationRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="评价"
                                    width="100px"
                                    prop="measure"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.measure}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.measureEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.measureRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="容量"
                                    width="100px"
                                    prop="capacity"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.capacity}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.capacityEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.capacityRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="频率"
                                    width="100px"
                                    prop="frequency"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.frequency}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.frequencyEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.frequencyRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="控制方法"
                                    width="100px"
                                    prop="method"></el-table-column>
                              </el-table>
                            </div>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>工具：</span>
                            <span v-if="languageS==='chinese' && props.row.toll.split('|*|').length===3">{{props.row.toll.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.toll.split('|*|').length===3">{{props.row.toll.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.toll.split('|*|').length===3">{{props.row.toll.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.toll}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>设备：</span>
                            <span v-if="languageS==='chinese' && props.row.device.split('|*|').length===3">{{props.row.device.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.device.split('|*|').length===3">{{props.row.device.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.device.split('|*|').length===3">{{props.row.device.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.device}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>辅料：</span>
                            <span v-if="languageS==='chinese' && props.row.accessories.split('|*|').length===3">{{props.row.accessories.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.accessories.split('|*|').length===3">{{props.row.accessories.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.accessories.split('|*|').length===3">{{props.row.accessories.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.accessories}}</span>
                          </div>
                        </div>
                      </el-table-column>
                      <el-table-column
                          v-slot:default="scope"
                          label="序号"
                          width="50">
                        {{scope.$index+1}}
                        <el-link @click="editBook(2,scope)"><i class="el-icon-download"></i></el-link>
                      </el-table-column>
                      <el-table-column
                          prop="work"
                          label="步骤内容"
                          v-slot:default="scope">
                        <div>
                          <span @click="editBook(100,scope)" v-if="languageS==='chinese' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[0]}}</span>
                          <span @click="editBook(100,scope)" v-else-if="languageS==='english' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[1]}}</span>
                          <span @click="editBook(100,scope)" v-else-if="languageS==='russian' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[2]}}</span>
                          <span @click="editBook(100,scope)" v-else>{{scope.row.work}}</span>
                          <span @click="editBook(100,scope)">--{{scope.row.spendTime}}S</span>
                          <el-link style="margin-left: 20px" @click="editBook(1,scope)"><i class="el-icon-edit"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editBook(4,scope)"><i class="el-icon-picture-outline"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editBook(5,scope)"><i class="el-icon-video-camera"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editBook(3,scope)"><i class="el-icon-delete"></i></el-link>
                        </div>

                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-if="workBookHeardUse===2">
                    <div style="text-align: right">
                      <el-link style="color: red" v-if="partsListData.length===0" @click="editPartsList(5,null)" >新建</el-link>
                    </div>
                    <el-table
                        :data="partsListData"
                        border
                        style="width: 100%;margin-top: 5px"
                        height="65vh"
                        highlight-current-row
                        @row-click="partsListClick">
                      <el-table-column
                          type="expand"
                          v-slot:default="props">
                        <div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>特殊特性：</span>
                            <span>{{props.row.special}}</span>
                          </div>
                        </div>
                      </el-table-column>
                      <el-table-column
                          v-slot:default="scope"
                          label="图示代码"
                          width="50">
                        {{scope.row.mapId}}
                      </el-table-column>
                      <el-table-column
                          prop="stepNum"
                          width="50"
                          label="工步号">
                      </el-table-column>
                      <el-table-column
                          prop="partName"
                          label="零部件名称"
                          width="120"
                          v-slot:default="scope">
                        <span v-if="scope.row.partName.split('|*|').length===3 && languageS==='chinese'">
                          {{scope.row.partName.split('|*|')[0]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='english'">
                          {{scope.row.partName.split('|*|')[1]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='russian'">
                          {{scope.row.partName.split('|*|')[2]}}
                        </span>
                        <span v-else>
                          {{scope.row.partName}}
                        </span>
                      </el-table-column>
                      <el-table-column
                          prop="partId"
                          label="零部件图号">
                      </el-table-column>
                      <el-table-column
                          prop="partNum"
                          label="数量"
                          width="50">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-if="workBookHeardUse===3">
                    开发中
                  </div>
                  <div v-if="workBookHeardUse===4">
                    开发中
                  </div>
                </div>
                <div style="flex: 1;">
                  <el-card shadow="hover" style="height: 72vh;margin-left: 8px">
                    <div style="width: 100%;height: 62vh;margin-top: -8px;text-align: left;">
                      <el-link :style="{ backgroundColor:videoAndImage1 , color:videoAndImageColor1 , padding: '4px 10px', borderRadius: '5px' }"
                               @click="videoAndImage(1)">图片</el-link>
                      <span style="margin-left: 8px;margin-right: 8px">|</span>
                      <el-link :style="{ backgroundColor:videoAndImage2 , color:videoAndImageColor2 , padding: '4px 10px', borderRadius: '5px' }"
                               @click="videoAndImage(2)">视频</el-link>
                      <span style="margin-left: 8px;margin-right: 8px">|</span>
                      <el-link :style="{ backgroundColor:videoAndImage3 , color:videoAndImageColor3 , padding: '4px 10px', borderRadius: '5px' }"
                               @click="videoAndImage(3)">现场视频</el-link>
                      <hr>
                      <div class="block">
                        <el-carousel trigger="click" height="62vh" v-if="editVideoAndImageUse===1">
                          <el-carousel-item v-for="(item, index) in itemView" :key="index">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="item"
                                fit='contain'
                                @click="handleImageClick(item)">
                            </el-image>
                          </el-carousel-item>
                        </el-carousel>
                        <el-carousel trigger="click" height="62vh" :autoplay="false" v-else-if="editVideoAndImageUse===2">
                          <el-carousel-item v-for="(item, index) in itemViewVideo" :key="index">
                            <video
                                style="width: 100%; height: 100%"
                                :src="item"
                                controls></video>
                          </el-carousel-item>
                        </el-carousel>
                        <div v-else-if="editVideoAndImageUse===3">
                          <img :src="'http://127.0.0.1:5000/video_feed'" alt="Video Stream" />
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--点击上传照片中的放大按钮，查看照片-->
    <el-dialog :visible.sync="dialogPictureAnnex">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!--抽屉放置区域-->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="50%">
      <el-table
          :data="tableData"
          style="width: 100%;margin-left: 25px;margin-right: 25px"
          highlight-current-row="highlight-current-row">
        <el-table-column
            prop="workshop"
            label="车间名称"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{scope.row.workshop.split('/')[0]}}</span>
            <span v-else-if="languageS==='english'">{{scope.row.workshop.split('/')[1]}}</span>
            <span v-else-if="languageS==='russian'">{{scope.row.workshop.split('/')[2]}}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="lineName"
            label="线体名称"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{scope.row.lineName.split('/')[0]}}</span>
            <span v-else-if="languageS==='english'">{{scope.row.lineName.split('/')[1]}}</span>
            <span v-else-if="languageS==='russian'">{{scope.row.lineName.split('/')[2]}}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="op"
            label="工序"
            sortable
            width="80"
            :formatter="formatter"
            v-slot="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            {{scope.row.op}}
          </div>
        </el-table-column>
        <el-table-column
            prop="fileName"
            label="文件名称"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[0]}}</span>
            <span v-else-if="languageS==='english' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[1]}}</span>
            <span v-else-if="languageS==='russian' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[2]}}</span>
            <span v-else>{{scope.row.fileName}}</span>
          </div>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>

import _ from "lodash";
import {
  filepath,
  machiningAssembly,
  OpAssembly,
  optionWorkshop,
  tree_workshop_product_op_chinese,
  tree_workshop_product_op_english,
  tree_workshop_product_op_russian,
  workshopAssembly
} from "@/configUse";

export default {
  name: "workGuide",
  data() {
    //校验数据是否为空
    var dataNull = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('数据不能为空，请输入/选择'));
      }
      callback();
    }
    return {
      activeName:'first',
      //记录控制计划弹窗的树形导航结构
      treeControl:tree_workshop_product_op_chinese,
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //语言选择的变量
      languageS:'chinese',
      //主导航上的提示
      titleMianId:'未选择产品',
      titleMianOp:'未选择工序',

      homepageName:'俄罗斯动力质量管理系统',//主页变化的语言选择
      //用在显示不同的样式部分
      //左侧的作业指导书按钮的样式
      background1:'',
      background2:'',
      background3:'',
      //新导航用到的变量
      //导航筛选的变量
      filterText:'',
      // 导航的目录
      treeList:tree_workshop_product_op_chinese,
      //树形的导航用到的数据模板
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //点击的树形结构内容Data
      treeData:null,
      //点击的树形结构内容
      treeNode:null,


      //用作作业指导书表头部分的选择
      workBookHeard1:'#0269fa',
      workBookHeard2:'',
      workBookHeard3:'',
      workBookHeard4:'',
      workBookHeardColour1:'white',
      workBookHeardColour2:'',
      workBookHeardColour3:'',
      workBookHeardColour4:'',

      //图片、视频/现场视频切换的按钮样式变量
      videoAndImage1:'#0269fa',
      videoAndImage2:'',
      videoAndImage3:'',
      //图片、视频切换的按钮颜色变化
      videoAndImageColor1:'white',
      videoAndImageColor2:'',
      videoAndImageColor3:'',


      //抽屉用到的变量
      //控制抽屉的表头
      drawerTitle:'',
      //控制抽屉打开
      drawer:false,
      //数据大表，记录工序作业指导书的
      tableData:[
        {
          //主键
          id:'',
          //车间名称
          workshop:'',
          //线体名称
          lineName:'',
          //工序名称
          op:'',
          //文件名称
          fileName:'',
          //版本号
          editionNum:'',
          //编制日期
          writeDate:'',
          //执行日期
          executeDate:'',
          //文件编号
          fileNum:'',
          //编制
          writeUse:'',
          //审核
          examineUse:'',
          //批准
          ratifyUse:'',
          //会签
          countersignUse:'',
          //作业指导书
          workBook:'',
          //产品图号
          productId:'',
          //视频附件
          BookVideo:'',
          //设备配合动作分解
          deviceTime:'',
          //修改记录
          editRecord:'',
          //控制计划标记位
          controlSign:'',
          //三不检验指导书标记位
          threeBookSign:'',
          //装配零部件明细
          partsList:'',
          //指导书类型
          bookType:'',
          //删除标记位
          deleteSign:'',
          //创建时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }
      ],
      //编辑大表的临时中转变量
      tableDataTemp: {
        //主键
        id: '',
        //车间名称
        workshop: '',
        //线体名称
        lineName: '',
        //工序名称
        op: '',
        //文件名称
        fileName: '',
        //版本号
        editionNum: '',
        //编制日期
        writeDate: '',
        //执行日期
        executeDate: '',
        //文件编号
        fileNum: '',
        //编制
        writeUse: '',
        //审核
        examineUse: '',
        //批准
        ratifyUse: '',
        //会签
        countersignUse: '',
        //作业指导书
        workBook: '',
        //产品图号
        productId: '',
        //视频附件
        bookVideo: '',
        //修改记录
        editRecord: '',
        //控制计划标记位
        controlSign: '',
        //三不检验指导书标记位
        threeBookSign: '',
        //装配零部件明细
        partsList: '',
        //指导书类型
        bookType: '',
        //删除标记位
        deleteSign: '',
        //创建时间
        establishTime: '',
        //修改时间
        UpdateTime: '',
      },
      //表单输入的控件变量
      formTableData:{
        //主键
        id: '',
        //车间名称
        workshop: '',
        //线体名称
        lineName: '',
        //工序名称
        op: '',
        //文件名称
        fileName: '',
        //版本号
        editionNum: '',
        //编制日期
        writeDate: '',
        //执行日期
        executeDate: '',
        //文件编号
        fileNum: '',
        //编制
        writeUse: '',
        //审核
        examineUse: '',
        //批准
        ratifyUse: '',
        //会签
        countersignUse: '',
        //作业指导书
        workBook: '',
        //产品图号
        productId: '',
        //视频附件
        bookVideo: '',
        //修改记录
        editRecord: '',
        //控制计划标记位
        controlSign: '',
        //三不检验指导书标记位
        threeBookSign: '',
        //装配零部件明细
        partsList: '',
        //指导书类型
        bookType: '',
        //删除标记位
        deleteSign: '',
        //创建时间
        establishTime: '',
        //修改时间
        UpdateTime: '',
      },
      //表单校验变量
      rulesForm:{
        workshop:[{ validator: dataNull, trigger: 'blur'},],
        lineName:[{ validator: dataNull, trigger: 'blur'},],
        op:[{ validator: dataNull, trigger: 'blur'},],
        fileName:[{ validator: dataNull, trigger: 'blur'},],
        editionNum:[{ validator: dataNull, trigger: 'blur'},],
        writeDate:[{ validator: dataNull, trigger: 'blur'},],
        executeDate:[{ validator: dataNull, trigger: 'blur'},],
        examineUse:[{ validator: dataNull, trigger: 'blur'},],
        ratifyUse:[{ validator: dataNull, trigger: 'blur'},],
        countersignUse:[{ validator: dataNull, trigger: 'blur'},]
      },
      //作业指导书的数据表
      workBook:[
        {
          id:0,
          work:'请编辑',//工作项目
          problem:'请输入',//关注点
          inspect:'请输入',//品质检查
          spendTime:0,//需要时间
          controlPlan:0,//控制计划的关联项
          toll:'',//工具
          device:'',//设备
          accessories:'',//辅料,
          pictureList:'',//图片列表
          videoList:''//视频列表
        }
      ],
      //记录部件明细
      partsListData:[
        {
          // 图示代码
          mapId:'',
          // 工步号
          stepNum:'',
          // 零部件编号
          partId:'',
          // 零部件名称
          partName:'',
          // 数量
          partNum:'',
          // 特殊特性
          special:'',
          // 最后编辑时间
          endDate:'',
          //最后编辑人
          endName:'',
          // 图片列表
          imageList:'',
          // 预留
          reserve1:'',
          // 预留
          reserve2:'',
          // 预留
          reserve3:'',
        }
      ],
      //记录部件的临时编辑变量
      partsListFrom:{
        // 图示代码
        mapId:'',
        // 工步号
        stepNum:'',
        // 零部件编号
        partId:'',
        // 零部件名称
        partName:'',
        // 数量
        partNum:'',
        // 特殊特性
        special:'',
        // 最后编辑时间
        endDate:'',
        //最后编辑人
        endName:'',
        // 图片列表
        imageList:'',
        // 预留
        reserve1:'',
        // 预留
        reserve2:'',
        // 预留
        reserve3:'',
      },
      //记录部件的点击状态：1.新增；2编辑；3.向下插入；4：删除
      partsListDoe:0,
      //记录部件的点击行内容，Scope格式
      partsListScope:null,

      //作业指导书控制计划部分的数据集合
      controlPlanData:[
        {
          //主键
          id:-1,
          //产品/过程规范/公差
          specification:'',
          //评价
          measure:'',
          //容量
          capacity:'',
          //频率
          frequency:'',
          //控制方法
          method:'',
        },
      ],
      //控制计划的列表展示
      tableDataControl:[
        {
          //记录主键ID
          id: null,
          //零件/过程编号
          processNumber: '',
          processNumberEnglish:'',
          processNumberRussian:'',
          //机器、夹具、装置、工装
          device: '',
          deviceEnglish:'',
          deviceRussian:'',
          //过程名称/操作描述
          operation: '',
          operationEnglish:'',
          operationRussian:'',
          //编号
          numberOrder: '',
          //产品
          product: '',
          productEnglish:'',
          productRussian:'',
          //过程
          processUse: '',
          processUseEnglish:'',
          processUseRussian:'',
          //特殊特性分类
          characteristic:'',
          //产品、过程规范、公差
          specification: '',
          specificationEnglish:'',
          specificationRussian:'',
          //评价、测量技术
          measure: '',
          measureEnglish:'',
          measureRussian:'',
          //容量
          capacity: '',
          capacityEnglish:'',
          capacityRussian:'',
          //频率
          frequency: '',
          frequencyEnglish:'',
          frequencyRussian:'',
          //控制方法
          method: '',
          methodEnglish:'',
          methodRussian:'',
          //责任部门
          department: '',
          departmentEnglish:'',
          departmentRussian:'',
          //反应计划
          reaction:0,
          //产品图号
          drawing: '',
          //工序号
          op: 0,
          //车间名称
          workshop:'',
          workshopEnglish:'',
          workshopRussian:'',
          //记录顺序用
          orderNumber:0,
          //记录删除标记
          deleteSign:1,
        }
      ],
      //固定选择器用到的变量
      //车间名称
      optionWorkshop: optionWorkshop,
      //线体名称
      optionLine:workshopAssembly,
      //工序名称
      optionOp:OpAssembly,
      //版本号
      optionEditionNum:[{
        value:1,
        label:'最新'
      },],
      //线体名称选择器的控制是否可以用
      disabledLineName:true,
      //工序的选择器，控制是否可用
      disabledOp:false,
      //弹窗用到的变量
      titleUse:'提示',
      //控制编辑作业指导书的步骤的弹窗
      dialogVisibleText:false,
      //控制表头的变量编辑的弹窗
      dialogTableHeader:false,
      //上传图片的弹窗打开后，点击放大管控弹窗提示
      dialogPictureAnnex:false,
      //上传照片的弹窗
      dialogPicture:false,
      //上传视频的弹窗
      dialogVideo:false,
      //打开控制计划的编辑器
      dialogVisibleControl:false,
      //控制打开零部件编辑弹窗
      partsListDialog:false,
      //控制零部件明细中的图片弹窗
      dialogPicturePart:false,

      //图片相关的数据，录像相关的项目
      itemView:[],//展示图片了路径,用在了走马灯部位
      itemViewVideo:[],//展示了录像的路径，用在录像的走马灯上
      editPictureType:0,//修改图片的类型，主要记录了
      PictureList:[],//图片文件的
      videoList:[],//录像的文件列表
      disabled:false,//图片显示的控制变量
      dialogImageUrl:'',//弹窗显示的图片路径
      videoUrl:'',//视频的地址
      fileType:'',//限定上传文件的类型

      //弹窗用到的输入变量
      inputText1:'',//记录作业步骤
      inputText2:'',//记录注意点
      inputText3:'',//品质检查
      inputText4:'',//设备名称
      inputText5:'',//辅料名称
      inputText6:'',//工具名称
      inputNum:0,//用户输入的时间

      //用户现在的类型是什么
      typeTableUse:0,//选择的哪一类作业指导书
      tableDataScope:null,//选择的总表内容传递
      editBookUse:0,//用户选择对作业要领书编辑的内容
      editBookScope:null,//用户现在的作业指导书内容传递
      editTableUse:0,//记录编辑表头的类型，1：插入，2.编辑，3.删除
      editVideoAndImageUse:1,//记录用户选择的是看图片，还是看视频。1:看图片；2:看视频；
      workBookHeardUse:1,//记录用户选择的看作业指导书上的那个类型，1代表是作业指导书；2.

      //选择控制计划条目是那个,记录的是选择的本行所有内容。
      controlPlanSelection:[],
      //选择的控制计划的ID是什么，是一个数据合集。
      controlPlanSelectionId:'',

      //等查询完毕控制计划关联项后，开始显示元素
      isControlPlanLoad:false,

      //忙加载
      loading:false,

      // 流对象，用于存储从摄像头获取的视频流
      stream: null,
      //现场视频地址
      videoSrc: 'http://127.0.0.1:5000/video_feed' // 替换为你的实际视频流 URL
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    //通用，树形导航筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //单击树形导航结构的反应
    treeClick(data,node) {
      this.titleMianId='未选择产品'
      this.titleMianOp='未选择工序'
      if (node.level>=3){
        this.treeData=data
        this.treeNode=node
        let firstFiledVal=''
        if (this.treeNode.parent.parent.label==='装配车间' ||
            this.treeNode.parent.parent.label==='Assembly workshop' ||
            this.treeNode.parent.parent.label==='Сборочная линия'){
          firstFiledVal='装配车间/Assembly workshop/Сборочная линия'
        }
        const secondFiledVal=node.parent.label
        const thirdFiledVal=node.data.label
        //向后端查询数据
        this.inquiryType('workshop','productId','op',firstFiledVal,secondFiledVal,thirdFiledVal)
        this.tableDataScope=null
        this.tableDataTemp={
          //主键
          id: '',
          //车间名称
          workshop: '',
          //线体名称
          lineName: '',
          //工序名称
          op: '',
          //文件名称
          fileName: '',
          //版本号
          editionNum: '',
          //编制日期
          writeDate: '',
          //执行日期
          executeDate: '',
          //文件编号
          fileNum: '',
          //编制
          writeUse: '',
          //审核
          examineUse: '',
          //批准
          ratifyUse: '',
          //会签
          countersignUse: '',
          //作业指导书
          workBook: '',
          //产品图号
          productId: '',
          //视频附件
          bookVideo: '',
          //修改记录
          editRecord: '',
          //控制计划标记位
          controlSign: '',
          //三不检验指导书标记位
          threeBookSign: '',
          //装配零部件明细
          partsList: '',
          //指导书类型
          bookType: '',
          //删除标记位
          deleteSign: '',
          //创建时间
          establishTime: '',
          //修改时间
          UpdateTime: '',
        }
        //打开弹窗
        this.drawer=true
      }
    },
    //通用，语言选择
    chooseLanguage(language){
      this.languageS=language
      if (this.languageS==='chinese'){
        this.treeControl=tree_workshop_product_op_chinese
        this.treeList=tree_workshop_product_op_chinese
      }
      else if (this.languageS==='english'){
        this.treeControl=tree_workshop_product_op_english
        this.treeList=tree_workshop_product_op_english
      }
      else if (this.languageS==='russian'){
        this.treeControl=tree_workshop_product_op_russian
        this.treeList=tree_workshop_product_op_russian
      }
    },
    // 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //单击控制计划的树形导航结构
    controlTreeClick(data,node){
      //这里的所有接口都走到《控制计划页的接口》.并且重新整理数据表。使用新的数据表。
      //根据点击的内容，查询控制计划中的信息
      if (data.label.includes('OP') || data.label.includes('GG') || data.label.includes('Hl')){
        //表明现在的点击是已经到了工序部位了。
        // 向后端发送请求，按照工序号、产品名称、车间名称进行筛选需要的内容
        this.$request.post('/inquiryControlPlanByOp',{
          firstFieldName:'workshop',
          firstFieldVal:node.parent.parent.data.label,
          secondFieldName:'drawing',
          secondFieldVal:node.parent.data.label,
          thirdFieldName:'op',
          thirdFieldVal:data.label,
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }else {
                //对大表赋值
                this.tableDataControl=result.data
              }
            })
      }
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'operateGuideBook',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.operateGuideBook
          this.useId=useId
        }
      })
    },
    //辅助函数，依据用户现点击的是那个产品，那一序，那个车间，然后赛选出作业指导书，是用三个变量筛选产品的
    // val是一个joson格式的数据{firstFiledName：firstFiledName,
    inquiryType(firstFiledName,secondFiledName,thirdFiledName,firstFiledVal,secondFiledVal,thirdFiledVal){
      //向后端发送请求，把查询出来的作业指导书类别赋值给大表。
      this.$request.post('/inquiryOperateGuideBook',{
        firstFiledName:firstFiledName,
        secondFiledName:secondFiledName,
        thirdFiledName:thirdFiledName,
        firstFiledVal:firstFiledVal,
        secondFiledVal:secondFiledVal,
        thirdFiledVal:thirdFiledVal
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.tableData=result.data
        }
      })
    },
    //选择器的变化引起的函数
    selectChange(val, doe){
      if (val==='机加车间/Machining workshop/Машиностроительный цех'){
        this.optionLine=machiningAssembly
        this.disabledLineName=false
      }
      else if (val==='装配车间/Assembly workshop/Сборочная линия'){
        this.optionLine=workshopAssembly
        this.disabledLineName=false
        console.log(doe)
      }
    },
    //编辑表头的函数，有：1：增加；2：修改；3：删除
    editTable(doe){
      if (this.treeNode===null){
        alert("请先选择工序")
        return
      }

      //做的是工序业指导书,
      //把用户选择的是编辑/添加/删除  中的哪一项传递出去
      this.editTableUse=doe
      if (doe===1){
        //是插入操作，组合数据
        this.formTableData={
          //主键
          id:'',
          //车间名称
          workshop:'',
          //线体名称
          lineName:'',
          //工序名称
          op:'',
          //文件名称
          fileName:'',
          //版本号
          editionNum:'',
          //编制日期
          writeDate:'',
          //执行日期
          executeDate:'',
          //文件编号
          fileNum:'',
          //编制
          writeUse:'',
          //审核
          examineUse:'',
          //批准
          ratifyUse:'',
          //会签
          countersignUse:'',
          //作业指导书
          workBook:'',
          //产品图号
          productId:'',
          //视频附件
          BookVideo:'',
          //修改记录
          editRecord:'',
          //控制计划标记位
          controlSign:'',
          //三不检验指导书标记位
          threeBookSign:'',
          //装配零部件明细
          partsList:'',
          //指导书类型
          bookType:'装配作业指导书',
          //删除标记位
          deleteSign:'',
          //创建时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }
        if (this.treeNode.parent.parent.label==='装配车间' ||
            this.treeNode.parent.parent.label==='Assembly workshop' ||
            this.treeNode.parent.parent.label==='Сборочная линия'){
          this.formTableData.workshop='装配车间/Assembly workshop/Сборочная линия'
          this.formTableData.op=this.treeNode.data.label
          this.formTableData.productId=this.treeNode.parent.label
          this.optionLine=workshopAssembly
          this.disabledLineName=false
        }
        this.titleUse='您正在插入一行《装配作业指导书》'
        this.dialogTableHeader=true
      }
      else if (doe===2){
        if (this.workBook.length===0){
          alert("请选择一个指导书进行修改")
        }
        else {
          //是编辑工作，涉及到一个赋值，需要深度拷贝
          this.formTableData=_.cloneDeep(this.tableDataTemp)
          this.titleUse='您正在修改选择的《装配作业指导书》'
          //打开弹窗
          this.dialogTableHeader=true
        }
      }
      else if (doe===3){
        if (this.workBook.length===0){
          alert("请选择一个指导书进行修改")
        }
        else {
          //是删除，涉及到一个赋值，需要深度拷贝
          this.formTableData=_.cloneDeep(this.tableDataTemp)
          this.titleUse='您正在删除一个《装配作业指导书》'
          //打开弹窗
          this.dialogTableHeader=true
        }
      }


    },
    //表头弹窗中的确认的按钮，向后端保存数据
    onSubmit(doe,formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //现在是对装配作业指导书进行添加/修改/删除,doe接收的是用户现在了操作类型：1.插入；2.编辑；3.删除
          if (doe===1){
            //现在是新建一个指导书
            /*组合数据*/
            //组合相关人员的标记
            this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
            this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
            this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
            //组合两个时间的数据，编制时间，执行时间
            let date=new Date(this.formTableData.writeDate)
            let year = date.getFullYear().toString().padStart(4, '0');
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
            let day = date.getDate().toString().padStart(2, '0');
            this.formTableData.writeDate=`${year}-${month}-${day}`

            date=new  Date(this.formTableData.executeDate)
            year = date.getFullYear().toString().padStart(4, '0');
            month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
            day = date.getDate().toString().padStart(2, '0');
            this.formTableData.executeDate=`${year}-${month}-${day}`

            //固定版本号，限定为1
            this.formTableData.editionNum=1
            //组合编制人
            this.formTableData.writeUse=this.useName
            //组合删除标记位
            this.formTableData.deleteSign=1
            //组合作业指导书的内容
            this.formTableData.workBook='作业指导书步骤|*|Steps of homework instruction manual|*|Этапы руководства по оперативной деятельности|%|作业关注点|*|Homework focus points|*|Приоритеты домашних заданий|%|品质检查|*|Quality Inspection|*|Контроль качества|%|0|%|-1|%|工具|*|tool|*|Инструменты|%|辅料|*|accessories|*|Вспомогательные материалы|%|设备|*|device|*|Оборудование|%|undefined|*||%|undefined|*||-|'
            //向后端发送请求，插入数据
            this.$request.post('interOperateGuideBook',this.formTableData).then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                alert("插入成功")
                //进行数据赋值
                this.tableData.push(this.formTableData)
                this.tableDataTemp=_.cloneDeep(this.formTableData)

                //指导书赋值
                //把数据进行分割,分割出步骤一条一条的。
                const temp=this.tableDataTemp.workBook.split('|-|')
                // 对每一条的数据进行处理
                this.workBook=[]
                for (let i = 0; i < temp.length-1; i++) {
                  //对数据进行分割
                  const time=temp[i].split('|%|')
                  // 组合数据
                  const timeTemp={
                    id:0,
                    work:time[0],//工作项目
                    problem:time[1],//关注点
                    inspect:time[2],//品质检查
                    spendTime:time[3],//需要的时间
                    controlPlan:time[4],//控制计划的关联项
                    toll:time[5],//工具
                    device:time[7],//设备
                    accessories:time[6],//辅料,
                    pictureList:time[8],//图片列表数据
                    videoList:time[9],//视频列表数据
                  }

                  this.workBook.push(timeTemp)
                }

                this.dialogTableHeader=false
              }
            })
          }
          else if (doe===2){
            //是编辑操作
            /*组合数据*/
            //组合相关人员的标记,重新设定编审批的内容
            this.formTableData.ratifyUse=this.formTableData.ratifyUse.replace(/\/指定/g,'')
            this.formTableData.examineUse=this.formTableData.examineUse.replace(/\/指定/g,'')
            this.formTableData.countersignUse=this.formTableData.countersignUse.replace(/\/指定/g,'')
            this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
            this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
            this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
            //组合两个时间的数据，编制时间，执行时间
            let date=new Date(this.formTableData.writeDate)
            let year = date.getFullYear().toString().padStart(4, '0');
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
            let day = date.getDate().toString().padStart(2, '0');
            this.formTableData.writeDate=`${year}-${month}-${day}`

            date=new  Date(this.formTableData.executeDate)
            year = date.getFullYear().toString().padStart(4, '0');
            month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
            day = date.getDate().toString().padStart(2, '0');
            this.formTableData.executeDate=`${year}-${month}-${day}`

            //固定版本号，限定为1
            this.formTableData.editionNum=1
            //组合编制人
            this.formTableData.writeUse=this.useName

            this.$request.post('/editOperateGuideBookTable',this.formTableData).then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                //数据赋值
                //进行数据赋值
                this.tableData[this.tableDataScope.$index]=this.formTableData
                this.tableDataTemp=_.cloneDeep(this.formTableData)
                this.dialogTableHeader=false;
                alert("修改成功")
              }
            })
          }
          else if (doe===3){
            //是删除操作，用修改一个字段的形式实现，但是这个是根据id修改一个int类型的。
            this.$request.post('editOperateGuideBookFieldInt',{
              id:this.tableDataScope.row.id,
              fieldName:'deleteSign',
              fieldVal:0,
            }).then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                //组合数据
                //删除大表中的内容
                this.tableData.splice(this.tableDataScope.$index,1);
                this.tableDataTemp={
                  //id主键
                  id:'',
                  //车间名称
                  workshop:'',
                  //线体名称
                  lineName:'',
                  //工序名称
                  op:'',
                  //文件名称
                  fileName:'',
                  // 版本号
                  editionNum:'',
                  //编制日期
                  writeDate:'',
                  //执行日期
                  executeDate:'',
                  //文件编号
                  fileNum:'',
                  //编制
                  writeUse:'',
                  //审核
                  examineUse:'',
                  //批准
                  ratifyUse:'',
                  //会签
                  countersignUse:'',
                  //作业指导书
                  workBook:'',
                  //产品图号
                  productId:'',
                  // 视频附件
                  BookVideo:'',
                  // 修改记录
                  editRecord:'',
                  //指导书类型
                  bookType:'',
                  //删除标记位
                  deleteSign:'',
                  //创建时间
                  establishTime:'',
                  //修改时间
                  UpdateTime:'',
                }
                this.workBook=[]
                this.tableDataScope=null
                this.dialogTableHeader=false
              }
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //对作业指导书操作，添加、编辑、删除，控制计划的关联设置等，所有的作业指导书编辑部分的函数
    editBook(doe,scope){
      //把用户现在的类型传递出去，1：编辑作业指导书；2.增加一个作业指导书的步骤；3.删除作业指导书；4.增加这个条目下的图片；5.增加这条目下的视频；
      this.editBookUse=doe
      //把用户选择的作业指导书的scope格式传递出去。
      this.editBookScope=scope

      if (this.treeNode===null){
        alert("请先选择工序")
        return
      }

      if (this.editBookUse===1){
        //是编辑操作
        //进行初始赋值
        this.titleUse='您正在编辑本条步骤'
        this.inputText1=_.cloneDeep(this.editBookScope.row.work)
        this.inputText2=_.cloneDeep(this.editBookScope.row.problem)
        this.inputText3=_.cloneDeep(this.editBookScope.row.inspect)
        this.inputText4=_.cloneDeep(this.editBookScope.row.device)
        this.inputText5=_.cloneDeep(this.editBookScope.row.accessories)
        this.inputText6=_.cloneDeep(this.editBookScope.row.toll)
        this.inputNum=_.cloneDeep(this.editBookScope.row.spendTime)
        this.dialogVisibleText=true
      }
      else if (this.editBookUse===2){
        //是一向下插入操作
        //初始化数据
        this.titleUse='您正在向下插入一个新的步骤'
        this.inputText1=''
        this.inputText2=''
        this.inputText3=''
        this.inputText4=''
        this.inputText5=''
        this.inputText6=''
        this.inputNum=0
        this.dialogVisibleText=true
      }
      else if (this.editBookUse===3){
        //是编辑操作
        //进行初始赋值
        this.titleUse='您正在编辑本条步骤'
        this.inputText1=_.cloneDeep(this.editBookScope.row.work)
        this.inputText2=_.cloneDeep(this.editBookScope.row.problem)
        this.inputText3=_.cloneDeep(this.editBookScope.row.inspect)
        this.inputText4=_.cloneDeep(this.editBookScope.row.device)
        this.inputText5=_.cloneDeep(this.editBookScope.row.accessories)
        this.inputText6=_.cloneDeep(this.editBookScope.row.toll)
        this.inputNum=_.cloneDeep(this.editBookScope.row.spendTime)
        this.dialogVisibleText=true
      }
      else if (this.editBookUse===4){
        //是编辑照片的操作，包括添加、删除。
        //组合图片编辑列表的数据
        //组合照片的数据
        if (this.editBookScope.row.pictureList.includes('undefined')){
          //没有图片信息
          this.PictureList = []
        }
        else {
          this.PictureList = []
          const temp1 = this.editBookScope.row.pictureList.split('|*|')
          for (let i = 0; i < temp1.length - 1; i++) {
            let temp2 = {
              name: temp1[i],
              percentage: 0,
              raw: File,
              size: 0,
              status: null,
              uid: null,
              url: filepath + temp1[i]
            }
            this.PictureList.push(temp2)
          }
        }
        this.titleUse='您正在编辑本行的图片信息'
        this.fileType='image/jpeg, image/png'
        this.dialogPicture=true
      }
      else if (this.editBookUse===5){
        //在装配作业指导书中编辑视频操作，包括添加、删除。
        //组合视频编辑列表的数据
        //组合视频的数据
        if (this.editBookScope.row.videoList.includes('undefined')){
          //没有视频信息
          this.videoList = []
        }
        else {
          this.videoList = []
          const temp1 = this.editBookScope.row.videoList.split('|*|')
          for (let i = 0; i < temp1.length - 1; i++) {
            let temp2 = {
              name: temp1[i],
              percentage: 0,
              raw: File,
              size: 0,
              status: null,
              uid: null,
              url: filepath + temp1[i]
            }
            this.videoList.push(temp2)
          }
        }
        this.fileType='video/mp4, video/x-matroska, video/quicktime, video/webm'
        this.titleUse='您正在编辑本行的视频信息'
        this.dialogVideo=true
      }
      else if (this.editBookUse===6){
        //点击的是编辑控制计划内容，关联控制计划的编辑页。
        this.titleUse='编辑控制计划管理项目'
        this.controlPlanSelection=[]
        this.tableDataControl=[]
        this.dialogVisibleControl=true
      }
      else if (this.editBookUse===100){
        //需要查看作业指导的图片，没有其他的编辑内容,是组合走马灯照片或者视频的
        //组合走马灯的照片
        if (this.editBookScope.row.pictureList.includes('undefined')){
          this.itemView=[]
        }
        else {
          let pictureTemp=this.editBookScope.row.pictureList.split('|*|')
          this.itemView=[]
          for (let i = 0; i < pictureTemp.length-1; i++) {
            let temp=filepath+pictureTemp[i]
            this.itemView.push(temp)
          }
        }
        //组合走马灯的视频
        if (this.editBookScope.row.videoList.includes('undefined')){
          this.itemViewVideo=[]
        }
        else {
          let pictureTemp=this.editBookScope.row.videoList.split('|*|')
          this.itemViewVideo=[]
          for (let i = 0; i < pictureTemp.length-1; i++) {
            let temp=filepath+pictureTemp[i]
            this.itemViewVideo.push(temp)
          }
        }
      }


    },
    //生成唯一标识码的函数（利用时间戳和随机数
    generateUniqueId() {
      return Date.now().toString() + Math.random().toString(36).slice(2, 11);
    },
    //保存作业指导书部分的数据的函数
    saveDataTextTwo(){
      if (this.editBookUse===1){
        //是编辑操作
        if (this.inputNum===0){
          alert("本工步无时间，请核对")
          return
        }
        //是装配作业指导书下的修改某一个条目的操作
        if (this.inputText1===''){
          this.inputText1='作业指导书步骤|*|Steps of homework instruction manual|*|Этапы руководства по оперативной деятельности'
        }
        if (this.inputText2===''){
          this.inputText2='无|*|not have|*|Нет'
        }
        if (this.inputText3===''){
          this.inputText3='无|*|not have|*|Нет'
        }
        if (this.inputText4===''){
          this.inputText4='无|*|not have|*|Нет'
        }
        if (this.inputText5===''){
          this.inputText5='无|*|not have|*|Нет'
        }
        if (this.inputText6===''){
          this.inputText6='无|*|not have|*|Нет'
        }

        //组合数据
        //向总数据中进行组合
        let temp=_.cloneDeep(this.workBook)
        temp[this.editBookScope.$index].work=this.inputText1
        temp[this.editBookScope.$index].problem=this.inputText2
        temp[this.editBookScope.$index].inspect=this.inputText3
        temp[this.editBookScope.$index].device=this.inputText4
        temp[this.editBookScope.$index].accessories=this.inputText5
        temp[this.editBookScope.$index].toll=this.inputText6
        temp[this.editBookScope.$index].spendTime=this.inputNum
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        //向后端发动数据，进行保存
        this.$request.post('editOperateGuideBookField',{
          id:this.tableDataScope.row.id,
          fieldName:'workBook',
          fieldVal:strTemp,
          fieldValOld:this.tableDataScope.row.editRecord,
          editUseName:this.useName
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }
              else {
                this.dialogVisibleText=false
                alert("修改成功")
                //对新数据进行重新赋值
                this.tableData[this.tableDataScope.$index].workBook=result.data
                //把数据赋值给临时的数据
                this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                //重新组合数据
                //组合作业指导书的内容
                //把数据进行分割,分割出步骤一条一条的。
                const temp=this.tableDataTemp.workBook.split('|-|')
                // 对每一条的数据进行处理
                this.workBook=[]
                for (let i = 0; i < temp.length-1; i++) {
                  //对数据进行分割
                  const time=temp[i].split('|%|')
                  // 组合数据
                  const timeTemp={
                    id:0,
                    work:time[0],//工作项目
                    problem:time[1],//关注点
                    inspect:time[2],//品质检查
                    spendTime:time[3],//需要的时间
                    controlPlan:time[4],//控制计划的关联项
                    toll:time[5],//工具
                    device:time[7],//设备
                    accessories:time[6],//辅料,
                    pictureList:time[8],//图片列表数据
                    videoList:time[9],//视频列表数据
                  }

                  this.workBook.push(timeTemp)
                }
              }
            })
      }
      else if (this.editBookUse===2){
        //是向下插入操作
        if (this.inputNum===0){
          alert("本工步无时间，请核对")
          return
        }
        //是装配作业指导书下的修改某一个条目的操作
        if (this.inputText1===''){
          this.inputText1='作业指导书步骤|*|Steps of homework instruction manual|*|Этапы руководства по оперативной деятельности'
        }
        if (this.inputText2===''){
          this.inputText2='无|*|not have|*|Нет'
        }
        if (this.inputText3===''){
          this.inputText3='无|*|not have|*|Нет'
        }
        if (this.inputText4===''){
          this.inputText4='无|*|not have|*|Нет'
        }
        if (this.inputText5===''){
          this.inputText5='无|*|not have|*|Нет'
        }
        if (this.inputText6===''){
          this.inputText6='无|*|not have|*|Нет'
        }
        //组合数据
        //向总数据中进行组合
        const workBookTemp={
          id:-1,
          work:this.inputText1,//工作项目
          problem:this.inputText2,//关注点
          inspect:this.inputText3,//品质检查
          spendTime: this.inputNum,//用时，单位S
          controlPlan:-1,//控制计划的关联项
          toll:this.inputText6,//工具
          device:this.inputText4,//设备
          accessories:this.inputText5,//辅料,
          pictureList:'undefined|*|'//图片列表
        }
        //拷贝数据
        let temp=_.cloneDeep(this.workBook)
        //插入数据
        temp.splice(this.editBookScope.$index+1,0,workBookTemp)
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        //向后端发动数据，进行保存
        this.$request.post('editOperateGuideBookField',{
          id:this.tableDataScope.row.id,
          fieldName:'workBook',
          fieldVal:strTemp,
          fieldValOld:this.tableDataScope.row.editRecord,
          editUseName:this.useName
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                this.dialogVisibleText=false
                alert("插入成功")
                //对新数据进行重新赋值
                this.tableData[this.tableDataScope.$index].workBook=result.data
                //把数据赋值给临时的数据
                this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                //重新组合数据
                //组合作业指导书的内容
                //把数据进行分割,分割出步骤一条一条的。
                const temp=this.tableDataTemp.workBook.split('|-|')
                // 对每一条的数据进行处理
                this.workBook=[]
                for (let i = 0; i < temp.length-1; i++) {
                  //对数据进行分割
                  const time=temp[i].split('|%|')
                  // 组合数据
                  const timeTemp={
                    id:0,
                    work:time[0],//工作项目
                    problem:time[1],//关注点
                    inspect:time[2],//品质检查
                    spendTime:time[3],//需要的时间
                    controlPlan:time[4],//控制计划的关联项
                    toll:time[5],//工具
                    device:time[7],//设备
                    accessories:time[6],//辅料,
                    pictureList:time[8],//图片列表数据
                    videoList:time[9],//视频列表数据
                  }

                  this.workBook.push(timeTemp)
                }
              }
            })
      }
      else if (this.editBookUse===3){
        //是删除操作
        //组合数据
        //向总数据中进行组合
        //拷贝数据
        let temp=_.cloneDeep(this.workBook)
        //插入数据
        temp.splice(this.editBookScope.$index,1)
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        //向后端发动数据，进行保存
        this.$request.post('editOperateGuideBookField',{
          id:this.tableDataScope.row.id,
          fieldName:'workBook',
          fieldVal:strTemp,
          fieldValOld:this.tableDataScope.row.editRecord,
          editUseName:this.useName
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                this.dialogVisibleText=false
                alert("删除成功")
                //对新数据进行重新赋值
                this.tableData[this.tableDataScope.$index].workBook=result.data
                //把数据赋值给临时的数据
                this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                //重新组合数据
                //组合作业指导书的内容
                //把数据进行分割,分割出步骤一条一条的。
                const temp=this.tableDataTemp.workBook.split('|-|')
                // 对每一条的数据进行处理
                this.workBook=[]
                for (let i = 0; i < temp.length-1; i++) {
                  //对数据进行分割
                  const time=temp[i].split('|%|')
                  // 组合数据
                  const timeTemp={
                    id:0,
                    work:time[0],//工作项目
                    problem:time[1],//关注点
                    inspect:time[2],//品质检查
                    spendTime:time[3],//需要的时间
                    controlPlan:time[4],//控制计划的关联项
                    toll:time[5],//工具
                    device:time[7],//设备
                    accessories:time[6],//辅料,
                    pictureList:time[8],//图片列表数据
                    videoList:time[9],//视频列表数据
                  }
                  this.workBook.push(timeTemp)
                }
              }
            })
      }

    },
    //保存控制计划的关联关系
    saveDataControl(){
      //用户要保存控制计划关联项。
      // 每一个步骤可能和多个控制计划关联，每一项之间用到了|*|分割符
      // 组合数据
      let controlPlanStr=''
      for (let i = 0; i < this.controlPlanSelection.length; i++) {
        controlPlanStr=controlPlanStr+this.controlPlanSelection[i].id+'|*|'
      }
      // 重新组合作业指导书的内容
      //向总数据中进行组合
      let temp=_.cloneDeep(this.workBook)
      if (controlPlanStr!==''){
        //向作业指导书中数据赋值
        temp[this.editBookScope.$index].controlPlan=controlPlanStr
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        //向后端写入数据
        //向后端发动数据，进行保存
        this.$request.post('editOperateGuideBookField',{
          id:this.tableDataScope.row.id,
          fieldName:'workBook',
          fieldVal:strTemp,
          fieldValOld:this.tableDataScope.row.editRecord,
          editUseName:this.useName
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }
              else {
                this.dialogVisibleText=false
                //对新数据进行重新赋值
                this.tableData[this.tableDataScope.$index].workBook=result.data
                //把数据赋值给临时的数据
                this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                //重新组合数据
                //组合作业指导书的内容
                //把数据进行分割,分割出步骤一条一条的。
                const temp=this.tableDataTemp.workBook.split('|-|')
                // 对每一条的数据进行处理
                this.workBook=[]
                for (let i = 0; i < temp.length-1; i++) {
                  //对数据进行分割
                  const time=temp[i].split('|%|')
                  // 组合数据
                  const timeTemp={
                    id:0,
                    work:time[0],//工作项目
                    problem:time[1],//关注点
                    inspect:time[2],//品质检查
                    spendTime:time[3],//需要的时间
                    controlPlan:time[4],//控制计划的关联项
                    toll:time[5],//工具
                    device:time[7],//设备
                    accessories:time[6],//辅料,
                    pictureList:time[8],//图片列表数据
                    videoList:time[9],//视频列表数据
                  }
                  this.workBook.push(timeTemp)
                }
              }
            })
      }
    },
    //主表的默认排序
    formatter(row, column) {
      console.log(column)
      return row.address;
    },
    //单击主表某一个数据表的时候，做出的反应（现在函数用在了主表上）
    tableDataClick(doe,scope){
      if (doe===1){
        this.titleMianId=this.treeNode.parent.label
        this.titleMianOp=this.treeNode.data.label
        //现在是主表上的点击
        //把点击击的单元格范围数据发送出去
        this.tableDataScope=scope
        //把数据赋值给临时的数据
        this.tableDataTemp=_.cloneDeep(scope.row)
        //组合作业指导书的内容
        //把数据进行分割,分割出步骤一条一条的。
        const temp=this.tableDataTemp.workBook.split('|-|')
        // 对每一条的数据进行处理
        //对作业指导书进行组合
        this.workBook=[]
        for (let i = 0; i < temp.length-1; i++) {
          //对数据进行分割
          const time=temp[i].split('|%|')
          // 组合数据
          const timeTemp={
            id:0,
            work:time[0],//工作项目
            problem:time[1],//关注点
            inspect:time[2],//品质检查
            spendTime:time[3],//需要的时间
            controlPlan:time[4],//控制计划的关联项
            toll:time[5],//工具
            device:time[7],//设备
            accessories:time[6],//辅料,
            pictureList:time[8],//图片地址列表
            videoList:time[9],//视频地址列表
          }
          this.workBook.push(timeTemp)
        }

        //对零部件列表进行组合
        //新组合零部件明细
        this.partsListData=[]
        let partsTemp=this.tableData[this.tableDataScope.$index].partsList.split('|-|')
        for (let i = 0; i < partsTemp.length-1; i++) {
          let partsItem=partsTemp[i].split('|%|')
          let temp={
            // 图示代码
            mapId:partsItem[0],
            // 工步号
            stepNum:partsItem[1],
            // 零部件编号
            partId:partsItem[2],
            // 零部件名称
            partName:partsItem[3],
            // 数量
            partNum:partsItem[4],
            // 特殊特性
            special:partsItem[5],
            // 最后编辑时间
            endDate:partsItem[6],
            // 最后编辑人
            endName: partsItem[7],
            // 图片列表
            imageList:partsItem[8],
            // 预留
            reserve1:partsItem[9],
            // 预留
            reserve2:partsItem[10],
            // 预留
            reserve3:partsItem[11],
          }
          this.partsListData.push(temp)
        }
        //关闭抽屉
        this.drawer=false
      }
    },
    //上传文件的函数(上传图片，视频，是零部件明细中的）
    saveFileAnnexPart(file, fileList){
      console.log(fileList)
      //是对图片的操作
      const formData = new FormData()
      //1.新生成一个文件名称,并且把文件名称的后缀添加上
      let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
      //2.记录一个新的图片名称
      let pictureName=''
      //把文件数据放进去
      file.name=fileName
      //把图片加入到自己的图片列表中，好像没有用
      this.PictureList.push(file)
      formData.append('file', file.raw)
      //把原来的图片字符串放进去，作为修改用
      //把数据整合到作业指导书的内容中
      //先判断原来的数据是否有图片
      if (this.partsListScope.row.imageList.includes('undefined')){
        //原来没有图片，需要现在全新生成
        pictureName=fileName+'|*|'
      }
      else {
        //原来已经有图片了
        pictureName=this.partsListScope.row.imageList+fileName+'|*|'
      }
      //重新组合作业指导书的文本内容。
      //组合数据
      //向总数据中进行组合
      let temp=_.cloneDeep(this.partsListData)
      //把新的图片字符串赋值
      temp[this.partsListScope.$index].imageList=pictureName
      //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
      let strTemp=''//组合的临时变量,用在向后端保存数据的变量
      for (let i = 0; i < temp.length; i++) {
        //组合自己每一条的变量
        let itemStr=temp[i].mapId+'|%|'+temp[i].stepNum+'|%|'+temp[i].partId+'|%|'+temp[i].partName
            +'|%|'+temp[i].partNum+'|%|'+temp[i].special+'|%|'+temp[i].endDate+'|%|'+temp[i].endName
            +'|%|'+temp[i].imageList+'|%|'+temp[i].reserve1+'|%|'+temp[i].reserve2+'|%|'+temp[i].reserve3+'|%|'
        strTemp=strTemp+itemStr+'|-|'
      }
      formData.append('id',this.tableDataScope.row.id)
      formData.append('fieldName','partsList')
      formData.append('fieldVal',strTemp)
      formData.append('fileName',fileName)
      console.log(strTemp)
      this.loading=true
      // 保存文件，需要返回修改后的图片地址保存数据，并且进行赋值

      this.$requestFile.post('/addPictureOperateGuideBook',formData).
      then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          if (result.data===null){
            alert("程序出现异常，请联系管理员")
          }
          else {
            //修改列表中的数据
            //修改主表中的数据和记录的保存数据
            this.tableData[this.tableDataScope.$index].partsList=result.data
            this.tableDataScope.row.partsList=result.data
            //修改作业指导书列表中的内容
            this.partsListData[this.partsListScope.$index].imageList=pictureName
            //组合走马灯的照片
            let pictureTemp=pictureName.split('|*|')
            this.itemView=[]
            for (let i = 0; i < pictureTemp.length-1; i++) {
              let temp=filepath+pictureTemp[i]
              this.itemView.push(temp)
            }
          }
          this.loading=false
        }
      })

    },
    //上传文件的函数(上传图片，视频，是作业指导书中的）
    saveFileAnnex(file, fileList){
      console.log(fileList)
      if (this.editBookUse===4){
        //是对图片的操作
        const formData = new FormData()
        //1.新生成一个文件名称,并且把文件名称的后缀添加上
        let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
        //2.记录一个新的图片名称
        let pictureName=''
        //把文件数据放进去
        file.name=fileName
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)
        formData.append('file', file.raw)
        //把原来的图片字符串放进去，作为修改用
        //把数据整合到作业指导书的内容中
        //先判断原来的数据是否有图片
        if (this.editBookScope.row.pictureList.includes('undefined')){
          //原来没有图片，需要现在全新生成
          pictureName=fileName+'|*|'
        }
        else {
          //原来已经有图片了
          pictureName=this.editBookScope.row.pictureList+fileName+'|*|'
        }
        //重新组合作业指导书的文本内容。
        //组合数据
        //向总数据中进行组合
        let temp=_.cloneDeep(this.workBook)
        //把新的图片字符串赋值
        temp[this.editBookScope.$index].pictureList=pictureName
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','workBook')
        formData.append('fieldVal',strTemp)
        formData.append('fileName',fileName)
        this.loading=true
        // 保存文件，需要返回修改后的图片地址保存数据，并且进行赋值
        this.$requestFile.post('/addPictureOperateGuideBook',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }
            else {
              //修改列表中的数据
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].workBook=result.data
              this.tableDataScope.row.workBook=result.data
              //修改作业指导书列表中的内容
              this.workBook[this.editBookScope.$index].pictureList=pictureName
              //组合走马灯的照片
              let pictureTemp=pictureName.split('|*|')
              this.itemView=[]
              for (let i = 0; i < pictureTemp.length-1; i++) {
                let temp=filepath+pictureTemp[i]
                this.itemView.push(temp)
              }
            }
            this.loading=false
          }
        })
      }
      else if (this.editBookUse===5){
        //是编辑视频
        const formData = new FormData()
        //1.新生成一个文件名称,并且把文件名称的后缀添加上
        let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
        //2.记录一个新的视频名称
        let pictureName=''
        //把文件数据放进去（新的文件名称
        file.name=fileName
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)
        formData.append('file', file.raw)
        //把原来的视频字符串放进去，作为修改用
        //把数据整合到作业指导书的内容中
        //先判断原来的数据是否有视频
        if (this.editBookScope.row.videoList.includes('undefined')){
          //原来没有图片，需要现在全新生成
          pictureName=fileName+'|*|'
        }
        else {
          //原来已经有视频了
          pictureName=this.editBookScope.row.videoList+fileName+'|*|'
        }
        //重新组合作业指导书的文本内容。
        //组合数据
        //向总数据中进行组合
        let temp=_.cloneDeep(this.workBook)
        //把新的视频字符串赋值
        temp[this.editBookScope.$index].videoList=pictureName
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','workBook')
        formData.append('fieldVal',strTemp)
        formData.append('fileName',fileName)

        //打开忙加载
        this.loading=true
        // 保存文件，需要返回修改后的图片地址保存数据，并且进行赋值
        this.$requestFile.post('/addPictureOperateGuideBook',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }else {
              //修改列表中的数据
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].workBook=result.data
              this.tableDataScope.row.workBook=result.data
              //修改作业指导书列表中的内容
              this.workBook[this.editBookScope.$index].videoList=pictureName
              //组合视频走马灯的视频
              if (this.editBookScope.row.videoList.includes('undefined')){
                this.itemViewVideo=[]
              }
              else {
                let pictureTemp=this.editBookScope.row.videoList.split('|*|')
                this.itemViewVideo=[]
                for (let i = 0; i < pictureTemp.length-1; i++) {
                  let temp=filepath+pictureTemp[i]
                  this.itemViewVideo.push(temp)
                }
              }
              //关闭忙加载
              this.loading=false
            }
          }
        })
      }

    },
    //点击查看照片的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogPictureAnnex = true;
    },
    //单击走马灯上的照片，图片放大方法
    handleImageClick(item){
      this.dialogImageUrl=item
      this.dialogPictureAnnex=true
    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type:mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },
    //用户点击的是看图片还是看视频，进行元素的切换
    videoAndImage(doe){
      if (doe===1){
        // 用户要看图像
        this.editVideoAndImageUse=1;
        this.videoAndImage1='#0269fa'
        this.videoAndImageColor1='white'

        this.videoAndImage2='white'
        this.videoAndImageColor2=''
        this.videoAndImage3='white'
        this.videoAndImageColor3=''
      }
      else if (doe===2){
        // 用户要看视频
        this.editVideoAndImageUse=2;
        this.videoAndImage2='#0269fa'
        this.videoAndImageColor2='white'

        this.videoAndImage1='white'
        this.videoAndImageColor1=''
        this.videoAndImage3='white'
        this.videoAndImageColor3=''
      }
      else if (doe===3){
        // 用户要看现场视频
        this.editVideoAndImageUse=3;
        this.videoAndImage3='#0269fa'
        this.videoAndImageColor3='white'

        this.videoAndImage1='white'
        this.videoAndImageColor1=''
        this.videoAndImage2='white'
        this.videoAndImageColor2=''
      }
    },
    //用户点击的是看作业指导书中的哪个数据，表头的上面的列表切换。
    workBookHeard(doe){
      this.workBookHeardUse=doe
      //图片、视频展示清空
      this.itemView=[]
      this.itemViewVideo=[]
      if (doe===1){
        this.workBookHeard1='#0269fa'
        this.workBookHeardColour1='white'

        this.workBookHeard2=''
        this.workBookHeardColour2=''

        this.workBookHeard3=''
        this.workBookHeardColour3=''

        this.workBookHeard4=''
        this.workBookHeardColour4=''
      }
      else if (doe===2){
        this.workBookHeard1=''
        this.workBookHeardColour1=''

        this.workBookHeard2='#0269fa'
        this.workBookHeardColour2='white'

        this.workBookHeard3=''
        this.workBookHeardColour3=''

        this.workBookHeard4=''
        this.workBookHeardColour4=''
      }
      else if (doe===3){
        this.workBookHeard1=''
        this.workBookHeardColour1=''

        this.workBookHeard2=''
        this.workBookHeardColour2=''

        this.workBookHeard3='#0269fa'
        this.workBookHeardColour3='white'

        this.workBookHeard4=''
        this.workBookHeardColour4=''
      }
      else if (doe===4){
        this.workBookHeard1=''
        this.workBookHeardColour1=''

        this.workBookHeard2=''
        this.workBookHeardColour2=''

        this.workBookHeard3=''
        this.workBookHeardColour3=''

        this.workBookHeard4='#0269fa'
        this.workBookHeardColour4='white'
      }
    },
    //对作业指导书行单击的时候展开栏的时候触发的函数，调动展开的内容展示,主要是调动控制计划。
    workBookRowClick(row){
      //去后端查询控制计划关联的内容
      if (row.controlPlan!=='-1'){
        //发送到后端进行查询
        this.$request.post('/inquiryControlPlanAssociationByOperateGuideBook',row.controlPlan)
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }
              else {
                this.isControlPlanLoad=false
                this.controlPlanData=result.data
                this.isControlPlanLoad=true
              }
            })
      }
    },
    //零部件的行上单击
    partsListClick(row) {
      //组合图片数据
      //组合走马灯的照片
      if (row.imageList.includes('undefined')) {
        this.itemView = []
      } else {
        let pictureTemp = row.imageList.split('|*|')
        this.itemView = []
        for (let i = 0; i < pictureTemp.length - 1; i++) {
          let temp = filepath + pictureTemp[i]
          this.itemView.push(temp)
        }
      }
    }
    },
    mounted() {
    //查询用户信息
    this.inquiry()
    this.workBook=[]
    this.partsListData=[]
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>